<template>
<div id="wrap">
  <div class="content-block content">
    <div class="banner">
    <div class="logo">
        <router-link class='product-wrap' :to="{ path: '/me/baseInfo', query: { id: customerId }}">
        <div class="logo_img">
            <img :src="customerBase.avatar" class="img-responsive" style="border:solid 1px #fff;border-radius: 50px;overflow:hidden;" width="64" height="64">
            <div style='color: #ffffff;font-size: 18px;padding-top: 15px;'>{{customerBase.nickname}}</div>
        </div>
        
        <div class="logo_txt">
            <span style="height: 25px;display: block;" class="yue">我的积分</span>
            <span style="height: 60px; line-height: 60px;" class="amount timer count-title">{{customerAccount.value}}</span>
            <span style="height: 25px;display: block;" class="yue timer count-title">青岛科技大学校园合伙人</span>
        </div>
        </router-link>
    </div>
    <div class="in">
        <div class="incomes">今日邀请 {{todayInvitedTotle}} 个</div>
        <div class="students">一共邀请 {{allInvitedTotle}} 个</div>
    </div>
    </div>
    <card>
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-l vux-1px-r">
          <span>1130</span>
          <br/>
          信用值
        </div>
        <div class="vux-1px-r">
          <span>{{customerAccount.value}}</span>
          <br/>
          收益
        </div>
        <div class="vux-1px-r">
          <span>1024</span>
          <br/>
          粉丝
        </div>
      </div>
    </card>

    <group style="font-size: 12px;">
      <cell title="市场" value="" is-link link="/market">
        <span slot="title" style="font-size:14px"><icon style="color: #999999;margin-right: 5px;" name="stack-exchange" scale="1.0"></icon><span>市场</span></span>
      </cell>
      <cell title="打卡签到" value="" is-link link="/market">
        <span slot="title" style="font-size:14px"><icon style="color: #999999;margin-right: 5px;" name="credit-card-alt" scale="1.0"></icon><span>打卡签到</span></span>
      </cell>
      <cell title="我的动态" value="" is-link link="/me/center">
        <span slot="title" style="font-size:14px"><icon style="color: #999999;margin-right: 5px;" name="odnoklassniki-square" scale="1.0"></icon><span>我的动态</span></span>
      </cell>
      <cell title="我的订单" value="" is-link link="/me/order">
        <span slot="title" style="font-size:14px"><icon style="color: #999999;margin-right: 5px;" name="address-card-o" scale="1.0"></icon><span>我的订单</span></span>
      </cell>
      <cell title="我的粉丝" value="1024" style="font-size:14px" is-link link="/me/follower">
        <span slot="title" style="font-size:14px"><icon style="color: #999999;margin-right: 5px;" name="building" scale="1.0"></icon><span>我的粉丝</span></span>
      </cell>
      <cell title="办会员卡" is-link link="/me/vipcard">
        <span slot="title" style="font-size:14px"><icon style="color: #999999;margin-right: 5px;" name="file-image-o" scale="1.0"></icon><span>办会员卡</span></span>
      </cell>
      <cell title="我的邀请码" is-link link="/me/qrcode">
        <span slot="title" style="font-size:14px"><icon style="color: #999999;margin-right: 5px;" name="envira" scale="1.0"></icon><span>我的邀请码</span></span>
      </cell>
    </group>
    </div>
    <flyray-tabbar></flyray-tabbar>
  </div>
</template>

<script>
import FlyrayTabbar from '@/components/FlyrayTabbar'
import { Divider, Card, Group, Cell, CellBox } from 'vux'
import { getCustomerId } from '../utils/utils'
import Icon from 'vue-awesome'

export default {
  components: {
    Card,
    Divider,
    Group,
    Cell,
    CellBox,
    FlyrayTabbar,
    Icon
  },
  data () {
    return {
      customerBase: '',
      customerAccount: null,
      customerRole: null,
      customerId: getCustomerId(),
      todayInvitedTotle: '0',
      allInvitedTotle: '0'
    }
  },
  created: function () {
  },
  mounted () {
    console.log('mounted')
    let config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      data: {
        'customerId': this.customerId
      },
      responseType: 'json',
      method: 'post'
    }
    let self = this
    this.$ajax('api/cms/me/customer/query', config).then(function (response) {
      console.log(response)
      self.customerBase = response.data.data.customerBase
      self.customerAccount = response.data.data.customerAccount
      self.customerRole = response.data.data.customerRole
      self.todayInvitedTotle = response.data.data.todayInvitedTotle
      self.allInvitedTotle = response.data.data.allInvitedTotle
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}

.banner {
    background-color: white;
    padding: 12.7999992px;
}
.banner .logo {
    background-color: #10c5b6;
    border-radius: 10px;
    height: 110px;
    padding: 10px 20px 10px 20px;
    box-shadow: 0 0rem 0.8rem rgba(0,0,0,.3);
}
.banner .logo .logo_img {
    margin-top: 0px;
    width: 90px;
    height: 58.666663px;
    display: inline-block;
}
.banner .logo .logo_txt {
    float: right;
    text-align: right;
    height: 110px;
}

.banner .logo .logo_txt .yue {
    color: #ffffff;
    font-size: 15.999999px;
}
.banner .logo .logo_txt .amount {
    display: block;
    color: #ffffff;
    font-size: 30px;
}
.banner .in {
    width: 100%;
    height: 37.333331px;
    margin-top: 11.7333326px;
}
.banner .in .incomes {
    display: inline-block;
    width: 44%;
    height: 37.333331px;
    border-radius: 8px;
    text-align: center;
    line-height: 37.333331px;
    color: #ffffff;
    font-size: 12.7999992px;
    background-color: #10c5b6;
}
.banner .in .students {
    float: right;
    width: 44%;
    height: 37.333331px;
    border-radius: 8px;
    text-align: center;
    line-height: 37.333331px;
    color: #ffffff;
    font-size: 12.7999992px;
    background-color: #10c5b6;
}

</style>
